<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>礼品管理</title>
    <link href="../css/base.css" rel="stylesheet" type="text/css">
    <link href="../css/admin.css" rel="stylesheet" type="text/css">
    <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <style>
        body{
            background: #fff;
            padding:20px;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-lg-3 fl">礼品编码：<input type="text" class="form-control d-ib"></div>
        <div class="col-lg-3 fl">礼品名称：<input type="text" class="form-control d-ib"></div>
        <div class="col-lg-3 fl"><button class="btn btn-info">搜索</button></div>
    </div>

    <div style="width:85%">
        <div class="clearfix t_c">
            <label class="fl"><input type="checkbox">全选</label>
            <button class='btn btn-danger fl'>上架</button>
            <button class='btn btn-danger fl'>下架</button>
            <button class='btn btn-danger fl change_all_kinds' data-toggle="modal" data-target="#change_all_kinds">批量修改分类</button>
            <button class='btn btn-danger fl change_all_time' data-toggle="modal" data-target="#change_all_time">批量修改时间</button>
            <button class='btn btn-danger fl change_all_score' data-toggle="modal" data-target="#change_all_score">批量修改积分</button>
        </div>
        <div class="t_c_tab table-responsive">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th style="text-align:center;min-width: 50px;">选择</th>
                        <th style="text-align:center;min-width: 80px;">礼品编码</th>
                        <th style="text-align:center;min-width: 72px;" class="sortBythisCol">分类<i class='fa fa-sort-amount-asc ml10'></i></th>
                        <th style="text-align:center;min-width: 80px;">礼品名称</th>
                        <th style="text-align:center;min-width: 70px;" class="sortBythisCol">总数<i class='fa fa-sort-amount-asc ml10'></i></th>
                        <th style="text-align:center;min-width: 70px;">已兑换数</th>
                        <th style="text-align:center;min-width: 73px;">开始时间</th>
                        <th style="text-align:center;min-width: 100px;" class="sortBythisCol">结束时间<i class='fa fa-sort-amount-asc ml10'></i></th>
                        <th style="text-align:center;min-width: 50px;" class="sortBythisCol">积分<i class='fa fa-sort-amount-asc ml10'></i></th>
                        <th style="text-align:center;min-width: 50px;" class="sortBythisCol">展示级别<i class='fa fa-sort-amount-asc ml10'></i></th>
                        <th style="text-align:center;min-width: 50px;" class="sortBythisCol">状态<i class='fa fa-sort-amount-asc ml10'></i></th>
                        <th style="text-align:center;min-width: 50px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>F180013</td>
                        <td>超值卡券</td>
                        <td ondblclick="change_name(this)">高压锅</td>
                        <td>500</td>
                        <td>0</td>
                        <td>2017-06-30</td>
                        <td>2017-08-30</td>
                        <td>500</td>
                        <td>J10000</td>
                        <td>上架</td>
                        <td><button class="btn btn-primary">编辑</button></td>
                    </tr>
                   <tr>
                        <td><input type="checkbox"></td>
                        <td>F180013</td>
                        <td>超值卡券</td>
                        <td ondblclick="change_name(this)">高压锅</td>
                        <td>500</td>
                        <td>0</td>
                        <td>2017-06-30</td>
                        <td>2017-08-30</td>
                        <td>500</td>
                        <td>J10000</td>
                        <td>上架</td>
                        <td><button class="btn btn-primary">编辑</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="mt20">
            <button class="btn btn-warning">导出产品</button>
        </div>
        
        <nav aria-label="Page navigation" class="clearfix navigation">
            <ul class="pagination fl">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">首页</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
            <div class="pa">
                <input type="text"><span>跳转</span>
            </div>
         </nav> 
    </div>

    <!--添加产品弹窗-->
    <div id="add_product" class="modal fade in" data-backdrop="static">
        <div class="modal-dialog text-center">
            <div class="modal-body" style="background: #fff;border: 3px solid #4383f7;border-radius: 7px;">
                <div style="width:60%;margin: 0 auto;">
                    <label class="d-b" style="text-align:left;padding-left: 20px;"><input type="checkbox"> 全选</label>
                    <table class="table table-bordered table-hover" style="margin:0 auto;width:100%;">
                        <thead>
                            <tr>
                                <th style="text-align:center;min-width: 50px;">选择</th>
                                <th style="text-align:center">定额方案代码<i class=''></i></th>
                                <th style="text-align:center">定额方案名称</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>F180013</td>
                                <td>少儿门急诊</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>F180013</td>
                                <td>少儿门急诊</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>F180013</td>
                                <td>少儿门急诊</td>
                            </tr>
                        </tbody>
                    </table>
                    <button class="btn fff yes-btn btn-info" data-dismiss="modal">确定</button> 
                </div>
            </div>
        </div>
    </div>
    <!--批量修改分类弹窗-->
    <div id="change_all_kinds" class="modal fade in" data-backdrop="static">
        <div class="modal-dialog text-center">
            <div class="modal-body" style="background: #fff;border: 3px solid #4383f7;border-radius: 7px;height:200px;">
                <div style="width:60%;margin: 0 auto;">
                     <i class="fa fa-remove fa-lg poa" data-dismiss="modal" style="color:#ccc;cursor:pointer;top:10%;right:5%"></i>
                    <p class="mt10">批量修改分类</p>
                    <div class='mt10 text-center clearfix'>
                        <button class="btn fff yes-btn btn-info fl" data-dismiss="modal" style="margin:0 10px 0 80px;">确定</button> 
                        <select name="" id="" class="form-control d-ib fl">
                            <option value="">超值卡券</option>
                            <option value="">电子数码</option>
                            <option value="">家居生活</option>
                         </select>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
     <!--批量修改时间弹窗-->
    <div id="change_all_time" class="modal fade in" data-backdrop="static">
        <div class="modal-dialog text-center">
            <div class="modal-body" style="background: #fff;border: 3px solid #4383f7;border-radius: 7px;">
                <div style="width:60%;margin: 0 auto;">
                    <div class="input-daterange" data-plugin="datepicker">
                         <i class="fa fa-remove fa-lg poa" data-dismiss="modal" style="color:#ccc;cursor:pointer;top:10%;right:5%"></i>
						<div class="input-group">
                            <span class='fl'>活动开始时间：</span>			
							<input type="text" class="form-control time" name="start" id="lz_dateStart"  placeholder="请输入日期">						
						</div>					
						<div class="input-group">	
                            <span class='fl'>活动结束时间：</span>					
							<input type="text" class="form-control time" name="end" id="lz_dateEnd"  placeholder="请输入日期" >						
						</div>					
					</div>		
                    <button class="btn fff yes-btn btn-info" data-dismiss="modal">确定</button> 
                </div>
            </div>
        </div>
    </div>
    <!--批量修改积分弹窗-->
    <div id="change_all_score" class="modal fade in" data-backdrop="static">
        <div class="modal-dialog text-center">
            <div class="modal-body" style="background: #fff;border: 3px solid #4383f7;border-radius: 7px;">
                <div style="width:60%;margin: 0 auto;">
                     <i class="fa fa-remove fa-lg poa" data-dismiss="modal" style="color:#ccc;cursor:pointer;top:10%;right:5%"></i>
                    <p class="mt10">修改积分<input type="number" class="form-control d-ib"></p>
                    <p class='mt10'>1元等于1积分</p>
                    <button class="btn fff yes-btn btn-info" data-dismiss="modal">确定</button> 
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="../js/common/jquery-1.11.3.min.js"></script>
<script src="../js/common/bootstrap.js"></script>
<script src="../js/common/bootbox.js"></script>
<script src="../js/common/bootstrap-datetimepicker.min.js"></script>
<script src="../js/common/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
	/*时间插件*/
	$('#lz_dateStart').datetimepicker({
		language: 'zh-CN',
		format:'yyyy-mm-dd hh:ii:ss',
		initialDate:new Date(), //初始化
		minView:'hour',
		autoclose:true,
		todayBtn:true
	});
	$('#lz_dateEnd').datetimepicker({
		language: 'zh-CN',
		format:'yyyy-mm-dd hh:ii:ss',
		initialDate:new Date(),//初始化
		minView:'hour',
		autoclose:true
	});
    
   $('.sortBythisCol').click(function(){
        if($(this).find('i').hasClass('fa-sort-amount-asc')){
            $(this).find('i').removeClass('fa-sort-amount-asc').addClass('fa-sort-amount-desc')
        }else{
            $(this).find('i').removeClass('fa-sort-amount-desc').addClass('fa-sort-amount-asc')
        }
     })


     var ThisCell;  
     //每一行的展示名称修改
     function change_name(ele){
       $('.show_name_edit').click()//调出弹窗
        ThisCell=ele;
    }
    $('.yes-btn').click(function(){//弹窗里的确定按钮
        var txt=$(this).parent().find('input').val()
        $(ThisCell).html(txt)
    })

     
</script>